<template>
  <div class="scroll-bar-cls card-edit-index-box" :class="{'scroll-able': bIsUnScaleable}" @click="click2Cancel">
    <!-- card-edit-index-box 手机屏幕 -->
    <div
      class="card-edit-phone"
      :style="'transform: scale(' + (scale * (this.curPanel > -1 ? 1.2 : 1)) + ');'">
        <div class="card-phone-top"><!-- card-phone-top --></div>

        <div id="card-phone-screen" class="card-phone-screen">
          <div class="card-phone-menu">
            <!-- card-phone-menu -->
            <p> {{ pageInfo.title_top || '标题' }} </p>
          </div>

          <!-- CardPhoneCardlist -->
          <CardPhoneCardlist class="scroll-bar-cls card-phone-layout"></CardPhoneCardlist>

          <!-- Panel -->
          <Panel v-if="curPanel > -1"></Panel>
        </div>

        <div class="card-phone-bottom"><!-- card-phone-bottom --></div>
      </div>
    </div>
</template>

<script>
  import CardPhoneCardlist from '@/views/card/content/CardPhoneCardlist.vue';
  import Panel from '@/views/card/panel/Panel.vue';
  import PanelCommonComputed from '@/views/card/js/mixins/panel-common-computed.js';
  import { mapState, mapActions } from 'vuex'
  export default {
    name: 'CardEditIndexBox',
    mixins: [PanelCommonComputed],
    data() {
      return {
        /* config */
        scale: 1,  // phone 缩放
        bIsUnScaleable: false,  // phone 是否缩放，最小缩放时可滚动
      }
    },
    computed: {
      ...mapState({
        pageInfo: state => _.cloneDeep(state.cardComponents.siteData.attrs),

        // card
        curPage: state => state.cardComponents.curPage,
        curTarget: state => _.cloneDeep(state.cardComponents.curTarget),

        // panel
        curPanel: state => _.cloneDeep(state.cardComponents.panelComponents.curPanel),
      }),
      bIsParentEditable() {
        return this.curTarget.parentId && typeof this.curTarget.parentId == 'string' && this.curTarget.parentId != '';
      },
    },
    components: {
      CardPhoneCardlist,
      Panel,
    },
    beforeMount() {
      // 1. resize
      this.resize2ScaleHandler();
      window.addEventListener('resize', (rEvent) => { this.resize2ScaleHandler(rEvent) }, false);
    },
    methods: {
      ...mapActions({
        updateCurTarget: 'cardComponents/updateCurTarget',
        updatePanelCurTarget: 'cardComponents/panelComponents/updateCurTarget',
        updateCurPanel: 'cardComponents/panelComponents/updateCurPanel',
      }),
      /* resize */
      resize2ScaleHandler() {  /** resize **/
        // 1. phone 缩放
        // let win_width = document.body.clientWidth || document.documentElement.clientWidth;
        let win_Height = window.innerHeight || Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        this.scale = win_Height / 1200;
      },

      /* mg & menu */
      click2Cancel(e) {  /* card元素去选择 */
        if(e.currentTarget == e.target) {
          // 1. card 去选择
          this.updateCurTarget({
            itemId: '',
            parentId: '',
          });

          // 2. panel 去选择
          this.updatePanelCurTarget({
            itemId: '',
            parentId: '',
          });
          this.updateCurPanel(-1);
        }
      },
    },
    watch: {
      scale(newVal) {
        // 控制最小缩放范围； 并当最小缩放时，可以滚动
        if(newVal <= 0.5) {
          this.scale = 0.5;
          this.bIsUnScaleable = true;
        }
        else {
          this.bIsUnScaleable = false;
        }

        // $emit scale
        this.$emit('resize', newVal);
      },
      curPage() {
        // 1. card 去选择
        this.updateCurTarget({
          itemId: '',
          parentId: '',
        });
      },
    },
  }
</script>

<style lang="scss">
  .card-edit-index-box {
    flex: 1;
    top: 75px;
    margin: 0 15px;
    min-width: 480px;
    height: calc(100% - 90px);
    overflow: hidden;
    z-index: 0;

    .card-edit-phone {
      position: relative;
      display: block;
      margin: 0 auto;
      width: 381px;

      // transform: scale(1);
      // transform: scale(.75);
      transform-origin: top center;
      transition: transform .5s ease-in-out;

      .card-phone-screen {
        position: relative;
        margin: 0 1px;
        width: 379px;
        height: 100%;
        border-left: 1px solid #6e7181;
        border-right: 1px solid #6e7181;
      }

      .card-phone-top, .card-phone-bottom, .card-phone-menu  {
        position: relative;
        width: 381px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .card-phone-top{
        height: 93px;
        // background-image: url('//static.hd.xxx.com/jye/fe-web/images/phone-top.png');
        background-image: url('https://static.hd.xxx.com/upload/biz/1/964835.png');
        // background: #aaa;
      }
      .card-phone-bottom {
        top: inherit;
        bottom: 0;
        height: 93px;
        // background-image: url('//static.hd.xxx.com/jye/fe-web/images/phone-bottom.png');
        background-image: url('https://static.hd.xxx.com/upload/biz/1/340104.png');
        // background: #aaa;
      }
      .card-phone-menu {
        width: 375px;
        height: 64px;
        margin: 0 1px;
        // background-image: url('//static.hd.xxx.com/jye/fe-web/images/phone-menu.png');
        background-image: url('https://static.hd.xxx.com/upload/biz/1/667487.png');
        // background: #aaa;

        p {
          position: absolute;
          bottom: 10px;
          width: 100%;
          font-size: 18px;
          color: #333;
          text-align: center;
        }
      }

      .card-phone-layout {
        position: relative;
        margin: 0 1px;
        width: 375px;
        height: 603px;
        // min-height: 603px;  // 减去 64px 为 phone-menu 的高度
        // background-image: url('//static.hd.xxx.com/jye/fe-web/images/edit-bg.jpg');
        background: #f2f2f2;

        overflow-y: auto;
        overflow-x: hidden;
        // overflow: hidden;

        // 组件流式布局
        display: flex;
        flex-direction: column;
      }
    }
  }
</style>
